import React, {Component, PropTypes} from 'react';
import ReactDOM from 'react-dom';

import {
	I18n, 
	Icon,
	Rate, 
	Button, 
	Panel, 
	Box,
	Toolbar, 
	Text,
	Tooltip,
	Message
} from 'rdplat-ui';

import {} from './dev.less';

/**
 * 获取子元素属性
 */
class Table extends Component{
	render(){
		let columns = React.Children.map(this.props.children, function(child, i){
			if(child.type == TableColumn){
				return {
					name: child.props.name,
					id: child.props.id
				}
			}
		});
		//console.log(columns);
	}
}

class TableColumn extends Component{

	render(){

	}
}

class I18nTest extends Component{

	static contextTypes = {
		lang: PropTypes.object
	}

	render(){
		return (<div>{this.context.lang.name }</div>)
	}
}
//获取本身dom元素 ReactDOM.findDOMNode(this)


class App extends Component{

	handleChange = (value) => {
		//console.log(value);
		//console.log(this.refs['rate']);
	}
	
	onBtnClick = (e) =>{
		Message.tip('测试消息', this.refs.btn);
	}

	render(){
		return ( 
			<div>
			<Toolbar>
				<Rate />
				<Button ref='btn' value='default' icon='cog' onClick={this.onBtnClick}/>
				<Button value='primary' icon='cog' type='primary'/>
				<Button value='danger' type='danger' icon='caret-down' iconAlign='right'/>
				<Button value='warning' type='warning' icon='stop-circle'/>
				<Button value='success' type='success' />
				<Button value='info' type='info' />
				<Button value='inverse' type='inverse' />
			</Toolbar>
			<Panel 
				title='测试' 
				icon='cog' 
				cols={3} 
				height={250}
				close
				maximize
				refresh>
				<Text id='userName'  label='归集余额' search disabled/>
				<Text id='password' type='password' label='姓名' required placeholder='请输入密码'/>
				<Text id='remark' label='备注信息' type='textarea' required labelWidth={80} disabled/>
				<Text id='city' tooltip='归集余额' label='国籍'/>
				<Text id='city1' span={2} tooltip='归集余额' label='国籍'/>
				
			</Panel>
			<Box span={1} >
				<h3>张三</h3>
			</Box>
			</div>
		)
	}
}

let app = ReactDOM.render(<I18n><App/></I18n>, document.getElementById('app'));
